import React from 'react';
import { Menu } from 'antd';
import * as Icon from '@ant-design/icons';
import { history, Link } from 'umi';
import routes from '@/routes/routes';

const { SubMenu } = Menu;
const ProMenu = () => {
  const pathName = history?.location?.pathname;

  const renderMenu = (routes: any) => {
    return routes.map((route: any) => {
      const icon: any = React.createElement(Icon[route.icon]);
      if (!route.routes) {
        return (
          <Menu.Item key={route.path} icon={icon}>
            <Link to={route.path}>{route.name}</Link>
          </Menu.Item>
        );
      } else {
        return (
          // 第三种渲染icon写法，直接使用React.createElement
          <SubMenu key={route.path} icon={icon} title={route.title}>
            {renderMenu(route.routes)}
          </SubMenu>
        );
      }
    });
  };
  return (
    <Menu mode="inline" defaultSelectedKeys={[pathName]}>
      {renderMenu(routes)}
    </Menu>
  );
};

export default React.memo(ProMenu);
